<!--
 * @Description: 地图
 * @Author: charles
 * @Date: 2021-05-05 23:34:12
 * @LastEditors: wupy
 * @LastEditTime: 2022-01-08 15:38:42
-->
<template>
  <div ref="map_container" style="height:95%"></div>
</template>

<script>

export default {
  data() {
    return {
      
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap(){
      //1.地图初始化
    var map = new AMap.Map(this.$refs.map_container, {
      zoom:1,//级别
      center: [112.583804,37.423954],//中心点坐标
      viewMode:'3D'//使用3D视图
});




  // 2.行政区轮廓
      let polygons=[];
      var opts = {
          subdistrict: 0,   //获取边界不需要返回下级行政区
          extensions: 'all',  //返回行政区边界坐标组等具体信息
          level: 'district'  //查询行政级别为 市
      };
      let district = new AMap.DistrictSearch(opts);
      district.setExtensions('all');
      district.search('太原市', function(status, result) {
          map.remove(polygons)//清除上次结果
          polygons = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
              for (var i = 0, l = bounds.length; i < l; i++) {
                  //生成行政区划polygon
                  var polygon = new AMap.Polygon({
                      strokeWeight: 2,
                      path: bounds[i],
                      fillOpacity: 0.4,
                      fillColor: '#FFF0A3',
                      strokeColor: '#FF7029'
                  });
                  polygons.push(polygon);
              }
          }
          map.add(polygons)
          map.setFitView(polygons);//视口自适应
      });
      //3.打点
       
      // 3.1创建一个 Marker 实例：迎泽公园
          var marker1 = new AMap.Marker({
          position: [112.561309,37.853547], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '迎泽公园', 
});        
         // 将创建的点标记添加到已有的地图实例
           map.add(marker1);
           
       //3.2创建一个 Marker 山西博物馆
           var marker2 = new AMap.Marker({
          position: [112.531265,37.865436], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '山西博物馆'
});
          // 3.2将创建的点标记添加到已有的地图实例：
           map.add(marker2);
            //3.3创建一个 Marker 实例：龙城森林公园
          var marker3 = new AMap.Marker({
          position: [112.75639,37.92274], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '龙城森林公园'
});
           //3.3 将创建的点标记添加到已有的地图实例
           map.add(marker3);
           // 3.4创建一个 Marker 实例：汾河水库
          var marker4 = new AMap.Marker({
          position: [111.885129,38.08174], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '汾河水库', 
});        
         //3.4 将创建的点标记添加到已有的地图实例
           map.add(marker4);
           // 3.5创建一个 Marker 实例：中北大学
          var marker5 = new AMap.Marker({
          position: [112.447763,38.015111], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '中北大学', 
});        
         // 3.5将创建的点标记添加到已有的地图实例
           map.add(marker5);
           // 3.6创建一个 Marker 实例：中北大学
          var marker6 = new AMap.Marker({
          position: [112.4006,37.723604], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '天龙山景区', 
});        
         // 3.6将创建的点标记添加到已有的地图实例
           map.add(marker6);
           
    }
    
    
  },

}
</script>